<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>

    <script type='text/javascript' src='<%=request.getContextPath()%>/dwr/util.js'></script>
    <script type='text/javascript' src='<%=request.getContextPath()%>/dwr/engine.js'></script>
    <script type='text/javascript' src='<%=request.getContextPath()%>/dwr/interface/GeocoderService.js'></script>

    <script src=" http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAANj-zMTPLea-APQQKgAopOBQ_ANElXRJGoUEtXINHpGstju1viRRsLcyNMc2mFA5GU_yB3iW2tdHOeA"
      type="text/javascript"></script>
    <script src="http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/src/markermanager.js"></script>
    <script type="text/javascript">
    //<![CDATA[
    var mgr = null;
    var map = null;

    function createMarker(lat, lng) {
      return new GMarker(new GLatLng(lat,lng));
    }

    function createMarkers() {
      var batch = [];
      <c:forEach items="${baches}" var="bache">
          batch.push(
            createMarker(
              <c:out value="${ bache.longitud}"/>,
              <c:out value="${bache.latitud}"/>
            )
          );
      </c:forEach>

      return batch;
    }

    function setupMarkers() {
      mgr = new MarkerManager(map);
      mgr.addMarkers(createMarkers(), 11);

      mgr.refresh();
    }

    function loadMap() {
      if (GBrowserIsCompatible()) {
        map = new GMap2( document.getElementById ("map"), {mapTypes: [G_SATELLITE_MAP]});
        map.addControl(new GLargeMapControl());
        map.enableScrollWheelZoom();
        map.setCenter(new GLatLng(-34.594936719911, -58.400204257075 ),17);
        window.setTimeout(setupMarkers, 0);
      }
    }

    function unloadMap() {
        GUnload();
    }

    function locate() {
      //TODO: incluir prototype.js
      var calle = dwr.util.getValue("calle");
      var altura = dwr.util.getValue("altura");
      GeocoderService.geocodeByAddress(
        calle,
        altura,
        function(data) {
          alert(data.locations[0].latitude);
          alert(data.locations[0].longitude);
          mgr.addMarker(createMarker(data.latitude, data.longitude), 11);
          mgr.refresh();
       //   dwr.util.setValue("demoReply", data);
        }
      );
    }


    //]]>
    </script>
  </head>
  <body onload="loadMap()" onunload="unloadMap()">
    <div id="map" style="width: 500px; height: 300px"></div>
    <c:forEach items="${baches}" var="bache">
      <c:out value="${bache.latitud}"/>
    </c:forEach>
    <input type="text" name="calle"/>
    <input type="text" name="altura"/>
    <input type="button" onclick="locate()"/>
  </body>
</html>
